<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="datares">
                  <div class="ra">我的钱包</div>
                  <div class="asdasda">我的收入</div>
                  <div class="adaffaferr">
                    <div class="adfafoo">
                      <div class="awdoooo">
                        <div class="afafawi">总收益</div>
                      </div>
                      <div class="adfaiii">
                          <span class="ageee">￥326 </span>
                          元
                        </div>
                    </div>
                    <div class="adfafoo">
                      <div class="awdoooo">
                        <div class="afafawi">今日收益</div>
                      </div>
                      <div class="adfaiii">
                          <span class="ageee">+26 </span>
                          元
                        </div>
                    </div>
                    <div class="adfafoo">
                      <div class="awdoooo">
                        <div class="afafawi">可用余额</div>
                      </div>
                      <div class="adfaiii">
                          <span class="ageee">206 </span>
                          元
                        </div>
                    </div>  
                  </div>

                  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="收入明细" name="first">
                      <el-form ref="form" label-width="100px" :inline="true" >
                        <el-form-item label="入账时间：" >
                          <el-select v-model="region" style="width: 190px;" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="收款原因：">
                          <el-select v-model="region" style="width: 190px;" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="金额：">
                          <el-select v-model="region" style="width: 190px;" placeholder="请选择活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                      <el-table
                        :data="tableData"
                        style="width: 90%;margin: 0 auto;">
                        <el-table-column
                          prop="date"
                          label="日期">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="姓名">
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="地址">
                        </el-table-column>
                      </el-table>
                      <div class="feny">
                        <el-pagination
                          background
                          layout="prev, pager, next"
                          :total="1000"
                          style="margin-top: 5px;">
                        </el-pagination>
                        第<el-input size="mini" style="width: 50px;"></el-input>页
                        <button style="height: 28px;border-radius: 4px;background-color: #fff;border: 1px solid #DCDFE6;margin-top: 6px;background-color: #409EFF;color: #FFF;">跳转</button>
                      </div>
                      <div class="asdasda">银行卡绑定</div>
                      <div class="lyhkbd">
                        <div class="lyhkbd_b">
                          <div style="height:37px;line-height:37px;">中国银行</div>
                          <div style="text-align: center;height:38px;line-height:38px;">621359999999999</div>
                          <p style="text-align: right;height:37px;line-height:37px;">解除绑定</p>
                        </div>
                        <div class="lyhkbd_b">
                          <div style="height:37px;line-height:37px;">中国银行</div>
                          <div style="text-align: center;height:38px;line-height:38px;">621359999999999</div>
                          <p style="text-align: right;height:37px;line-height:37px;">解除绑定</p>
                        </div>
                        <div class="lyhkbd_b">
                          <div style="height:37px;line-height:37px;">中国银行</div>
                          <div style="text-align: center;height:38px;line-height:38px;">621359999999999</div>
                          <p style="text-align: right;height:37px;line-height:37px;">解除绑定</p>
                        </div>
                      </div>
                      <div class="asdasda">支付密码设置</div>
                      <el-button style="margin:10px 0px 10px 60px" type="danger" @click="$router.push('/lzfmm')">设置支付密码</el-button>
                    </el-tab-pane>
                    <el-tab-pane label="提现记录" name="second">提现记录</el-tab-pane>
                  </el-tabs>
             
                </div>
                
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
export default {
    components: { 
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
       activeName: 'first',
       region:"",
       tableData: [{
            date: '2016-05-02',
            name: '推荐注册',
            address: '5元'
          }, {
            date: '2016-05-02',
            name: '推荐注册',
            address: '5元'
          }, {
            date: '2016-05-02',
            name: '推荐注册',
            address: '5元'
          }, {
            date: '2016-05-02',
            name: '推荐注册',
            address: '5元'
          }]
      }
      
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.datares {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}

.datares .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px 
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.asdasda {
  font-family: SourceHanSansCN-Regular;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #434343;
  border-bottom: 1px solid #dcdcdc;
  margin-top: 20px;
  line-height: 46px;
  color: #434343;
  text-indent: 70px;
}
.adaffaferr {
  width: 865px;
  margin: 30px auto;
  display: flex;
   justify-content: space-between;
}
.adfafoo {
  width: 256px;
	height: 159px;
	border-radius: 10px;
	border: solid 1px #f06048;
}
.awdoooo{
  	width: 256px;
	height: 48px;
	background-color: #f06048;
	border-radius: 10px;
    display: flex;
  justify-content: center;
  align-items: center;
}
.adfaiii {
  	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #e60012;
  text-align: center;
    margin-top: 23px;
}
.afafawi {
  text-align: center;
  color: #fff;
  font-size: 20px
}
.adfaiii .ageee {
  	font-size: 36px;
	font-weight: normal;
	font-stretch: normal;
	letter-spacing: 0px;
	color: #e60012;
}
.feny{
  display: flex;
  line-height: 40px;
  justify-content: center;
  width: 70%;
  margin: 0 auto;
}
.lyhkbd{
  display: flex;
  justify-content: space-around;
}
.lyhkbd_b{
  width: 236px;
  height: 112px;
  background-color: rgb(248,182,82);
  border-radius: 10px;
  margin: 15px 0px;
  padding: 0px 5px;
}
</style>